import React, { Component } from 'react';
import Chart from 'react-apexcharts';
import DataJSON from "../../data/data.json";

export default class BarBoard extends Component {

  constructor(porps) {
    super(porps);
    this.state = {
      options: {
        chart: {
          id: 'bar-board'
        },
        xaxis: {
          type: "datetime"
        },
        dataLabels: {
          enabled: false,
        },
        yaxis: {
          min: this.props.min - 1,
          max: this.props.max + 1
        },
        title: {
          text: this.props.title,
          align: 'left',
          margin: 50,
          floating: false,
          style: {
            fontSize: '14px',
            fontWeight: 'bold',
            fontFamily: undefined,
            color: '#263238'
          },
        },
        annotations: {
          yaxis: [
            {
              y: this.props.max,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Max is ' + this.props.max
              }
            },
            {
              y: this.props.min,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Min is ' + this.props.min
              }
            },
            {
              y: this.props.avg,
              borderColor: '#00E396',
              label: {
                borderColor: '#00E396',
                style: {
                  color: '#fff',
                  background: '#00E396'
                },
                text: 'Avg is ' + this.props.avg
              }
            },
          ]
        }
      },
      series: [{
        name: 'h2o_temperature',
        data: this.props.datas
      }]
    }

  }

  render() {
    return (
      <Chart options={this.state.options} series={this.state.series} type="bar" width={"100%"} height={320} />
    )
  }
}
